<html>
	<head>
		<script src="jquery-mobile/jquery-1.10.2.js"></script>
		<script src="jquery-mobile/jquery.mobile-1.4.2.js"></script>
		<link rel="stylesheet" type="text/css" href="jquery-mobile/jquery.mobile-1.4.2.css"></link>
		<style>
			.body {
				text-align: center;
			}
			.ui-content {
				max-width: 500px;
			}
		</style>
		<script>
			var currentPage = 1,
				MAXPAGE = 10,
				MINPAGE = 1;
				
			function nextPage() {
				if(currentPage >= MAXPAGE) {
					currentPage = MINPAGE;
				} else {
					++currentPage;
				}
				return currentPage;
			}
			
			function prevPage() {
				if(currentPage <= MINPAGE) {
					currentPage = MAXPAGE;
				} else {
					--currentPage;
				}
				return currentPage;
			}
			
			$(document).ready(
				function() {
					$("#display").html( $("#p" + currentPage).html() );
					$("body").keydown(
						function(e) {
							switch(e.keyCode) {
							case 37:
								$("#display").hide().fadeIn();
								$("#display").html( $("#p" + prevPage()).html() );
								break;
							case 39:
								$("#display").hide().fadeIn();
								$("#display").html( $("#p" + nextPage()).html() );
								break;
							default:
								break;
							}
						}
					);
				}
			);
		</script>
	</head>
	
	<body>
		<div id="display" data-role="page" class="ui-content ui-shadow">
			HELLO
		</div>
		<div id="p1" data-role="page">
			<div data-role="header" class="ui-header">
				Main page of TaskIt
			</div>
			<div data-role="main">
			<img src="taskit-walkthru1.jpg" width="100%"></img>
			</div>
			<div data-role="footer" class="ui-footer">
				Footer
			</div>
		</div>
		<div id="p2" data-role="page">
			<div data-role="header">
			</div>
			<div data-role="main">
			<img src="taskit-walkthru2.jpg" width="100%"></img>
			</div>
			<div data-role="footer">
			</div>
		</div>
		<div id="p3" data-role="page">
			<div data-role="header">
			</div>
			<div data-role="main">
			<img src="taskit-walkthru3.jpg" width="100%"></img>
			</div>
			<div data-role="footer">
			</div>
		</div>
		<div id="p4" data-role="page">
			<div data-role="header">
			</div>
			<div data-role="main">
			<img src="taskit-walkthru4.jpg" width="100%"></img>
			</div>
			<div data-role="footer">
			</div>
		</div>
		<div id="p5" data-role="page">
			<div data-role="header">
			</div>
			<div data-role="main">
			<img src="taskit-walkthru5.jpg" width="100%"></img>
			</div>
			<div data-role="footer">
			</div>
		</div>
		<div id="p6" data-role="page">
			<div data-role="header">
			</div>
			<div data-role="main">
			<img src="taskit-walkthru6.jpg" width="100%"></img>
			</div>
			<div data-role="footer">
			</div>
		</div>
		<div id="p7" data-role="page">
			<div data-role="header">
			</div>
			<div data-role="main">
			<img src="taskit-walkthru7.jpg" width="100%"></img>
			</div>
			<div data-role="footer">
			</div>
		</div>
		<div id="p8" data-role="page">
			<div data-role="header">
			</div>
			<div data-role="main">
			<img src="taskit-walkthru8.jpg" width="100%"></img>
			</div>
			<div data-role="footer">
			</div>
		</div>
		<div id="p9" data-role="page">
			<div data-role="header">
			</div>
			<div data-role="main">
			<img src="taskit-walkthru9.jpg" width="100%"></img>
			</div>
			<div data-role="footer">
			</div>
		</div>
		<div id="p10" data-role="page">
			<div data-role="header">
			</div>
			<div data-role="main">
			<img src="taskit-walkthru10.jpg" width="100%"></img>
			</div>
			<div data-role="footer">
			</div>
		</div>
	</body>
</html>